<template>
  <div>
    <pre>----------基本用法-------------</pre>
    <button @click="Add">+</button>
    <div>
      current: {{Test.current}}
    </div>
    <div>
      age: {{Test.age}}
    </div>


    <pre>------------结构store-----------------</pre>
    <div>origin value {{Test.current}}</div>
    <div>
      pinia:{{ current }}--{{ name }}
      change :
      <button @click="change">change</button>
    </div>

    <pre>-------------actions和getters-------------------</pre>
    <div>
      <button @click="AddRandom">actions同步调用</button>
      <div>
        {{Test.counter}}
      </div>
    </div>
    <div>
      <button @click="AddByAsync">actions异步调用</button>
      <div>
        {{Test.user}}
      </div>
    </div>
    <pre>----------------------API-------------------------------</pre>
    <button @click="reset">重置</button>
    <pre>----------------------订阅state里的值------------------------------------</pre>
    <button @click="abscribe">订阅state</button>
    <pre>--------------------------订阅actions的调用--------------------------------------------</pre>
    <button @click="onAction">订阅actions</button>
  </div>
</template>

<script setup lang="ts">
import {useTestStore} from "../store";
import {storeToRefs} from "pinia";
const Test = useTestStore()
const Add = () => {
  // State 是允许直接修改值的
  // Test.current++
  // 批量修改State的值
  // 在他的实例上有$patch方法可以批量修改多个值
  // Test.$patch({
  //   current:200,
  //   age:300
  // })
//   批量修改函数形式
//   推荐使用函数形式 可以自定义修改逻辑
//   Test.$patch((state) => {
//     state.current++
//     state.age = 40
//   })
//   通过原始对象修改整个实例
//   $state您可以通过将store的属性设置为新对象来替换store的整个状态
//   缺点就是必须修改整个对象的所有属性
//   Test.$state = {
//     current:200,
//       age:300
//   }
//   通过actions修改
//   定义Actions
  // 在actions 中直接使用this就可以指到state里面的值
    Test.setCurrent()
}
const change = () => {
  Test.current++
}
// 非响应式
// const { current, name } = Test
// console.log(current, name);
// 响应式
// 其原理跟toRefs 一样的给里面的数据包裹一层toref
// 源码 通过toRaw使store变回原始数据防止重复代理
// 循环store 通过 isRef isReactive 判断 如果是响应式对象直接拷贝一份给refs 对象 将其原始对象包裹toRef 使其变为响应式对象
const {current,name} = storeToRefs(Test)
console.log(current, name);

const AddRandom = () => {
  Test.randomizeCounter()
}
const AddByAsync = () => {
  Test.getLoginInfo()
}
const reset = () => {
  // 调用$reset();
  //
  // 将会把state所有值 重置回 原始状态
  Test.$reset()
}
const abscribe = () => {
  Test.$subscribe((args,state) => {
    // 类似于Vuex 的abscribe 只要有state 的变化就会走这个函数
    console.log(args,state);
  },
      // 如果你的组件卸载之后还想继续调用请设置第二个参数
      {detached:true}
  )
}
const onAction = () => {
  Test.$onAction((args) => {
    console.log(args)
  })
}
</script>

<style scoped>

</style>